<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" ref="formInline" :rules="rules" label-width="90px" slot="form">
                <!-- edit by cuihd at 2018/8/8 -->
                <!-- 去除省、市、区，身份，创建时间的筛选项，默认展开，初始状态不展示筛选信息 -->
                <!-- <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="用户所在省">
                            <province v-model="formInline.fProvinceId" ></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户所在市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId" ></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户所在区">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId" ></region>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="exueCode">
                            <el-input v-model="formInline.exueCode" placeholder="请输入e学云ID号" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名">
                            <el-input v-model="formInline.userName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="formInline.phone" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="身份">
                            <el-select v-model="formInline.userType" placeholder="请选择" style="width:100%" >
                                <el-option v-for="(item,index) in formInline.identityArr" 
                                :key="index" :label="item.identityName" :value="item.identityId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- edit by cuihd at 2018/8/8 -->
                    <!-- 去除省、市、区，身份，创建时间的筛选项，默认展开，初始状态不展示筛选信息 -->
                    <!-- <el-col :span="8">
                        <el-form-item label="创建时间"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.startDate" :clearable='true' :editable="false" type="date" placeholder="选择开始日期" 
                                    :picker-options="formInline.pickerOptions1" 
                                    @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.endDate" :clearable='true' :editable="false" type="date" placeholder="选择结束日期" 
                                    :picker-options="formInline.pickerOptions2" 
                                     @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="search('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <span class="table-title-span"></span>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <!-- <el-table-column align="center" label="序号" width="50" type="index"> -->
                <!-- </el-table-column> -->
                <el-table-column align="center" label="e学云ID号" min-width="100" prop="exueCode">
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="userName" min-width="120">
                </el-table-column>
                <el-table-column label="身份" align="center" width="80">
                    <template scope="scope">
                        <span>{{scope.row.userType | filterUserType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" prop="phone" min-width="130" v-if="isHide">
                </el-table-column>
                 <el-table-column label="所属区域" align="center" min-width="160">
                    <template scope="scope">
                        <span>{{scope.row.provinceName}}-{{scope.row.cityName}}-{{scope.row.areaName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" min-width="160">
                    <template scope="scope">
                        <span>{{scope.row.createTime | filterTime}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import moment from 'moment';
import {findUsersByPage} from 'api/userManagement';
import TableLayout from 'components/TableLayout';

import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';

import { mapState, mapActions, mapGetters } from 'vuex';
import validate from '@/utils/validate';
export default {
    name: 'userManageList',
    components: { TableLayout, province, city, region},
    data() {
        return {
            formInline: {
        // 查询 表单数据
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '', // 区县
                exueCode: '', // e学云ID号
                userName: '', // 姓名
                phone: '', // 手机号
                userType: '1', // 身份
                startDate: '', // 创建开始时间
                endDate: '', // 创建结束时间
                province: [], // 省份列表
                findCity: [], // 城市列表
                findArea: [], // 区县列表
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now());
                    }
                },
                identityArr: [
                    { identityName: '教师', identityId: '1' },
                    { identityName: '学生', identityId: '2' },
                    { identityName: '家长', identityId: '3' }
                ]
            },
            isHide: false,
            loading: false,
            AnnounceList: [],
            listQuery: { // 分页
                page: 1,
                total: 0
            },
            rules: {
                exueCode: [...validate.exueCode()],
                phone: [...validate.phone()]
                // phone: [
                //         { pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/, message: '请输入正确的联系方式', trigger: 'blur'}
                // ]
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['uid'])
    },
    created() {
        // this.searchFetchData();
    },
    filters: {
        filterUserType(value) {
            const userTypeArr = ['教师', '学生', '家长']
            return userTypeArr[`${+value-1}`]        
        },
        filterTime(value) {
            if (!value) {
                return '--'
            } else {
                if (value=='0-0-0 0:0:0') {
                    return '--'
                } else {
                    return value.substring(0, 19)
                }             
            }            
        }
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        startDateChange(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime());
                }
            }
        },
        endDateChange(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return (time.getTime() > new Date(date).getTime());
                }
            } 
        },

    // 点击查询
        // search() {
        //     this.searchFetchData();
        // },
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    if (!this.formInline.exueCode && !this.formInline.userName && !this.formInline.phone) {
                        this.$message.info('e学云ID号、姓名、手机号至少填写一项!');
                        return false;
                    }
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

    // 查询列表
        searchFetchData() {     
            this.isHide=this.formInline.userType=='2'?false:true;
            this.loading = true;
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD')+' 00:00:00';
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD')+' 23:59:59';
            findUsersByPage(
                this.listQuery.page,
                this.config.pageSize,
                this.formInline.fProvinceId,
                this.formInline.fCityId,
                this.formInline.fAreaId,
                this.formInline.exueCode, 
                this.formInline.userName,
                this.formInline.phone,
                this.formInline.userType,
                startDate,
                endDate
            ).then(res => {
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            });
        },
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
};
</script>

<style lang="scss" scoped>
@import '../../../styles/var';
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
  
}
</style>
